<template>
  <split-container type="left" class="h-full">
    <dept-tree @current-change="methods.nodeChange" v-model:data="tree.data" v-model:currentNode="tree.currentNode">
    </dept-tree>
    <x-card hide-search class="!border-l-0">
      <template #title>
        <el-space>
          <x-button bus-type="insert" @click="methods.add"></x-button>
          <x-button bus-type="update" @click="methods.edit"></x-button>
          <x-button bus-type="view" @click="methods.view"></x-button>
          <x-button type="danger" @click="methods.disable" :icon="ButtonIcons.del">禁用</x-button>
          <x-button type="success" @click="methods.enable" :icon="ButtonIcons.ok">启用</x-button>
        </el-space>
        <el-space>
          <el-input v-model="condition.name" placeholder="名称"></el-input>
          <el-checkbox label="查询已禁用" :true-label="-1" :false-label="0" v-model="condition.status" border></el-checkbox>
          <x-button bus-type="query" @click="methods.query"></x-button>
        </el-space>
      </template>
      <template #main>
        <x-table v-model:selection="table.selection" v-bind="table" @page-change="methods.tablePageChange">
          <template #status="{ row }">
            <el-tag :type="row.status === 0 ? 'success' : 'warning'">{{ row.status === 0 ? '正常' : '禁用' }}</el-tag>
          </template>
        </x-table>
      </template>
    </x-card>
    <editor v-model="editor.visable" :model="editor.model" :edit-type="editor.editType" :tree-data="tree.data"
      @saved="methods.query"></editor>
  </split-container>
</template>
<script setup lang="ts">
import DeptTree from './DeptTree.vue'
import { DeptService } from '~/service/sys'
import { ButtonIcons } from '~/components/xview/button'
import { IDeptTreeNodeItem } from '~/types/sys/IDeptTreeNode'
import { ITableColumn } from '~/components/xview/table/ITableColumn'
import { reactive } from 'vue'
import { DeptQueryCondition } from '~/types/sys/DeptQueryCondition'
import elpUtil from '~/utils/elp'
import DeptTreeHook from './DeptTreeHook'
import Editor from './editor.vue'
import { SysDept } from '~/types/sys/SysDept'
import { initTable } from '~/hooks/TableHooks'
import { EditorHooks } from '~/hooks'

const { tree } = DeptTreeHook()

const methods = {
  add() {
    editor.insert({
      parentId: tree.currentNode.id,
      levelCode: '【自动生成】',
      deptType: 0
    } as SysDept)
  },
  edit() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要编辑的数据行')
      return
    }
    editor.update(table.selection[0])
  },
  view() {
    if (table.selection.length == 0) {
      elpUtil.msg.warning('请先选择需要查看的数据行')
      return
    }
    editor.view(table.selection[0])
  },
  async disable() {
    if (table.selection.length == 0) return
    const ids = table.selection.map((t) => t.id)
    await DeptService.disable(ids)
    elpUtil.msg.success('单位/部门禁用成功')
    methods.query()
  },
  async enable() {
    if (table.selection.length == 0) return
    const ids = table.selection.map((t) => t.id)
    await DeptService.enable(ids)
    elpUtil.msg.success('单位/部门启用成功')
    methods.query()
  },
  async query() {
    const data = await DeptService.query(condition)
    table.pageCurrent = data.currentPage
    table.recordsTotal = data.recordsTotal
    table.tableData = data.data
  },
  tablePageChange(page: number) {
    condition.paging.current = page
    methods.query()
  },
  nodeChange(node: IDeptTreeNodeItem) {
    condition.parentId = node.id
    methods.query()
  },
  dialogVisable(val: boolean) {
    editor.visable = val
  }
}

const condition = reactive<DeptQueryCondition>(new DeptQueryCondition())

const editor = EditorHooks.init<SysDept>()

const table = initTable<SysDept>([
  {
    label: '状态',
    prop: 'status',
    slot: true,
    width: 70
  },
  {
    label: '部门编码',
    prop: 'levelCode',
    width: 200
  },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '简称',
    prop: 'shortName',
    width: 300
  },
  {
    label: '类型',
    prop: 'deptType',
    formatter: (row: SysDept): string => {
      return row.deptType === 0 ? '部门' : '单位'
    },
    width: 80
  }
] as ITableColumn[])

</script>
